<template>
  <div class="box">
    <div class="container">
      <el-card>
          <div class="searchBox">
            <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable style="width:500px;margin-right:5px">
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="search">查找</el-button>
        </div>
           <!-- 表格区域 -->
           <el-table
            :data="orderList"
            border stripe fit
            empty-text='null'
            class="userTable" 
            style="width: 90%;margin-top:12px">
            <el-table-column  prop="oid" label="订单编号" width="50">
            </el-table-column>
            <el-table-column  prop="username" label="用户名" width="100">
            </el-table-column>
            <el-table-column  prop="order_date" label="预定日期" width="100">
            </el-table-column>
            <el-table-column  prop="cname" label="预约场地" width="100">
            </el-table-column>
            <el-table-column  prop="sname" label="所在球馆" width="140">
            </el-table-column>
            <el-table-column label="预定时间段" width="150">
                <template slot-scope="scope">
                        {{   scope.row.start_time+'至'+scope.row.end_time}}
                </template>
            </el-table-column>
            <el-table-column   label="订单状态" width="80" >
                   <template slot-scope="scope">
                        <el-tag v-if="scope.row.state==1" >预约中</el-tag>
                        <el-tag v-if="scope.row.state==2" type="warning">已结算</el-tag>
                        <el-tag v-if="scope.row.state==0" type="danger">已过期</el-tag>
                   </template>
            </el-table-column>
              <el-table-column prop="create_date"  label="下单时间" width="160">
            </el-table-column>
           
             <el-table-column  label="操作" width="">
                 <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" size="mini" @click="settleOrder(scope.row)">结算订单</el-button>
                         <el-button type="danger"  icon="el-icon-delete" size="mini" @click="removeOrderList(scope.row.oid)">取消订单</el-button>   
                 </template>
            </el-table-column>  
            

           </el-table>
           <Pagination v-if="orderList.length!=0" :pageSize="pagination.pageSize" :total="pagination.total" :pageNo="pagination.currentPage" :continues=5 @getPageNo="goToPageNo" />
      </el-card>
       
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import Api from '../../api'
export default {
  data() {
    return {
      query:'',
      orderList:[],
       // 分页器参数
      pagination:{
         currentPage:'',
         pageSize:'',
         total:'',
         uid:''
      },
    }
  },
   watch:{
         query(newVal,oldVal){
        if(newVal === '' && oldVal!== ''){
            this.getUserOrderListData();
       }
      }
    },
  computed:{
    ...mapGetters({orderListData:'orderListDataByPage'}),
    ...mapGetters({userData:'login/userData'})
  },
  methods: {
        // 获取该用户订单信息
        async getUserOrderListData(){
            this.pagination.uid = this.userData.uid;
            this.$store.dispatch('getOrderListByPage',this.pagination).then(ok=>{
            this.orderList = this.orderListData.data;
            this.pagination = this.orderListData.pagination;
            console.log(ok);
        })
        },
        // 跳转到其他页码回调
        goToPageNo(pageNo){
        
          if(this.query){
            this.pagination.currentPage = pageNo;
            this.search();
            return ;
          }
            this.pagination.currentPage = pageNo;
            this.getUserOrderListData();
        },
        // 取消订单
        async removeOrderList(oid){
            this.$confirm('确认要取消订单吗?, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                 this.$store.dispatch('removeOrderList',oid).then(ok=>{
                   if(ok){
                     this.$message.success('成功取消该订单');
                     this.getUserOrderListData();
                   }
                 })
              
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
           
        },
        // 结算订单
        async settleOrder(item){
            if(item.state == 2) return  this.$message.warning('已经是结算状态了！');
            const {data:res} = await Api.editOrderState({oid:item.oid,state:2});
            if(res.status != 200) return this.$message.error('结算失败');
            this.$message.success('结算成功');
            this.getUserOrderListData();
        },
        // 关键字搜索
        async search(){
          if(this.query){
            const {data:res} = await Api.searchOrderList({query:this.query,pagination:this.pagination})
              if(res.status !== 200) return this.$message.warning(`抱歉没有找到相关订单！`);
                this.orderList = res.data.data;
                this.pagination = res.data.pagination;
            }else{
                this.$message.warning('请输入关键词');
            }
        }
  },
  created() {
         this.getUserOrderListData();
  },
  mounted() {
   
  },
}
</script>

<style lang="less" scoped>
    .box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
     .container{
         position: relative;
         width: 75%;
         height: 800px;
         background: rgb(244, 241, 241);
         .el-card__body{
           .el-table.userTable.el-table--fit.el-table--striped.el-table--border.el-table--enable-row-hover.el-table--enable-row-transition{
             width: 100% !important;
           }
         }
         .searchBox{
           display: flex;
           justify-content: center;

         }
     }
     
    }
   
</style>